<%--
  User: icanci
  Date: 2020/10/7 0:18
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <jsp:include page="head.jsp"/>
    <style type="text/css">
        #imgPreview {
            width: 40%;
            height: 180px;
            margin: 10px auto 0px auto;
            /*border: 1px solid black;*/
            text-align: center;
        }

        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }

        #imgSpan {
            position: absolute;
            top: 60px;
            left: 40px;
        }

        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        #img3 {
            height: 100%;
            /*width: 100%;*/
            display: none;
        }

        #imgPreview_1 {
            width: 40%;
            height: 180px;
            margin: 10px auto 0px auto;
            /*border: 1px solid black;*/
            text-align: center;
        }

        #prompt3_1 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }

        #imgSpan_1 {
            position: absolute;
            top: 60px;
            left: 40px;
        }

        #img3_1 {
            height: 100%;
            /*width: 100%;*/
            display: none;
        }


    </style>
    <script>
        function changepic() {
            $("#prompt3").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file').files[0];
            reads.readAsDataURL(f);
            reads.onload = function (e) {
                document.getElementById('img3').src = this.result;
                $("#img3").css("display", "block");
            };
        }

        function changepic_1() {
            $("#prompt3_1").css("display", "none");
            var reads = new FileReader();
            f = document.getElementById('file_1').files[0];
            reads.readAsDataURL(f);
            reads.onload = function (e) {
                document.getElementById('img3_1').src = this.result;
                $("#img3_1").css("display", "block");
            };
        }
    </script>
    <body class="hold-transition skin-purple sidebar-mini">
        <div class="wrapper">
            <%-- 头部 --%>
            <jsp:include page="header.jsp"/>
            <%-- 头部 --%>
            <%-- 侧栏区域 --%>
            <jsp:include page="aside.jsp"/>
            <%-- 侧栏区域 --%>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 内容头部 -->
                <section class="content-header">
                    <h1>
                        数据管理
                        <small>添加票品</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                        <li><a href="#">数据管理</a></li>
                        <li class="active">添加票品</li>
                    </ol>
                </section>
                <!-- 内容头部 -->

                <!-- 正文区域 -->
                <section class="content">
                    <form action="${pageContext.request.contextPath}/api/v1/pri/admin/carousel-setting-upload" method="post"
                          enctype="multipart/form-data">
                        <div class="box-body">
                            <div class="tab-pane" id="tab-common">
                                <div class="row data-type">
                                    <div class="col-md-2 title">轮播图标题</div>
                                    <div class="col-md-4 data">
                                        <input name="carouselName" type="text" class="form-control" placeholder="轮播图标题"
                                               value="">
                                    </div>
                                    <div class="col-md-2 title">轮播图链接的数据地址</div>
                                    <div class="col-md-4 data">
                                        <input name="carouselAddress" type="text" class="form-control" placeholder="轮播图链接的数据地址"
                                               value="">
                                    </div>
                                    <div class="col-md-2 title">是否可用</div>
                                    <div class="col-md-4 data">
                                        <select name="carouselStatus" class="form-control">
                                            <option value="0">不可用</option>
                                            <option value="1">可用</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 title">权重值</div>
                                    <div class="col-md-4 data">
                                        <select name="carouselWeight" class="form-control">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>

                                    <div class="col-md-2 title"
                                         style="text-align: center; line-height: 200px; height: 200px;">轮播图片
                                    </div>
                                    <div class="col-md-10 data"
                                         style="text-align: center; height: 200px;">
                                        <div id="imgPreview">
                                            <div id="prompt3">
                                                                            <span id="imgSpan">
                                                                                <strong>点击上传</strong>
                                                                        <br/>
                                                                        <i class="aui-iconfont aui-icon-plus"></i>
                                                                            </span>
                                                <input type="file" name="file" id="file" class="filepath"
                                                       onchange="changepic(this)"
                                                       accept="image/jpg,image/jpeg,image/png,image/PNG">
                                            </div>
                                            <img src="#" id="img3"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 title"></div>
                                <div class="col-md-10 data text-center">
                                    <button type="submit" class="btn bg-maroon">保存</button>
                                    <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
                <!-- 正文区域 /-->
            </div>
            <!-- 内容区域 /-->


            <!-- 底部导航 -->
            <jsp:include page="footer.jsp"/>
            <!-- 底部导航 /-->

        </div>
        <jsp:include page="footer-js.jsp"/>
        <script>
            $(document).ready(function () {
                // 选择框
                $(".select2").select2();

                // WYSIHTML5编辑器
                $(".textarea").wysihtml5({
                    locale: 'zh-CN'
                });
            });


            // 设置激活菜单
            function setSidebarActive(tagUri) {
                var liObj = $("#" + tagUri);
                if (liObj.length > 0) {
                    liObj.parent().parent().addClass("active");
                    liObj.addClass("active");
                }
            }


            $(document).ready(function () {

                // 颜色选取器
                $(".my-colorpicker1").colorpicker();
                $(".my-colorpicker2").colorpicker();

            });


            $(document).ready(function () {
                // 选择框
                $(".select2").select2();
            });


            $(document).ready(function () {

                //Date picker
                $('#datepicker').datepicker({
                    autoclose: true,
                    language: 'zh-CN'
                });

                //Date picker
                $('#datepicker2').datepicker({
                    autoclose: true,
                    language: 'zh-CN'
                });

                //Date picker
                $('#datepicker3').datepicker({
                    autoclose: true,
                    language: 'zh-CN'
                });

                // datetime picker
                $('#dateTimePicker').datetimepicker({
                    format: "yyyy-mm-dd HH:mm",
                    autoclose: true,
                    todayBtn: true,
                    language: 'zh-CN'
                });

                // datetime picker
                $('#dateTimePicker2').datetimepicker({
                    format: "yyyy-mm-dd HH:mm",
                    autoclose: true,
                    todayBtn: true,
                    language: 'zh-CN'
                });

                // datetime picker
                $('#dateTimePicker3').datetimepicker({
                    format: "yyyy-mm-dd HH:mm",
                    autoclose: true,
                    todayBtn: true,
                    language: 'zh-CN'
                });

                // datetime picker
                $('#dateTimePicker4').datetimepicker({
                    format: "yyyy-MM-dd HH:mm",
                    autoclose: true,
                    todayBtn: true,
                    language: 'zh-CN'
                });
                //Date range picker
                $('#reservation').daterangepicker({
                    locale: {
                        applyLabel: '确认',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        firstDay: 1
                    },
                    opens: 'left', // 日期选择框的弹出位置
                    separator: ' 至 '
                    //showWeekNumbers : true,     // 是否显示第几周
                });

                //Date range picker with time picker
                $('#reservationtime').daterangepicker({
                    timePicker: true,
                    timePickerIncrement: 30,
                    format: 'MM/DD/YYYY h:mm A',
                    locale: {
                        applyLabel: '确认',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        firstDay: 1
                    },
                    opens: 'right', // 日期选择框的弹出位置
                    separator: ' 至 '
                });

                //Date range as a button
                $('#daterange-btn').daterangepicker({
                        locale: {
                            applyLabel: '确认',
                            cancelLabel: '取消',
                            fromLabel: '起始时间',
                            toLabel: '结束时间',
                            customRangeLabel: '自定义',
                            firstDay: 1
                        },
                        opens: 'right', // 日期选择框的弹出位置
                        separator: ' 至 ',
                        ranges: {
                            '今日': [moment(), moment()],
                            '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            '最近7日': [moment().subtract(6, 'days'), moment()],
                            '最近30日': [moment().subtract(29, 'days'), moment()],
                            '本月': [moment().startOf('month'), moment().endOf('month')],
                            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        },
                        startDate: moment().subtract(29, 'days'),
                        endDate: moment()
                    },
                    function (start, end) {
                        $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    }
                );
            });
            $(document).ready(function () {

                /*table tree*/
                $("#collapse-table").treetable({
                    expandable: true
                });
            });

            $(document).ready(function () {
                CKEDITOR.replace('editor1');
                // $(".textarea").wysihtml5({
                //     locale:'zh-CN'
                // });
                $("#markdown-textarea").markdown({
                    language: 'zh',
                    autofocus: false,
                    savable: false
                });

            });
            $(document).ready(function () {

                // 激活导航位置
                setSidebarActive("admin-dataform");

            });
        </script>
    </body>
</html>
<!---->
